<template>
  <div class="login" :style="{height:deviceHeight+'px'}">
    <div class="logo"><img src="../assets/img/houseCloud.png" alt=""></div>
    <form id="loginForm" name="loginForm" novalidate @submit.prevent="submit"  role="form">
      <div>
        <label for="loginName">账号 : </label>
        <input type="text" v-validate="'required'" id="loginName" name="loginName" placeholder="请输入您的账号" autocomplete="off" maxlength="30" v-model="login.loginName">
        <span v-show="errors.has('loginName')" class="help is-danger">{{ errors.first('loginName') }}</span>
      </div>
      <div>
        <label for="loginPwd">密码 : </label>
        <input v-bind ="{'type':type}" v-validate="'required|min:6|max:10'" id="loginPwd" name="loginPwd" placeholder="请输入您的密码" minlength="6" maxlength="10" v-model="login.loginPwd">
        <i id="icon-eyes" :class="type == 'password'?'close':'open'" @click="showPwd"></i>
        <span v-show="errors.has('loginPwd')" class="help is-danger">{{ errors.first('loginPwd') }}</span>
      </div>
      <button type="submit" :class="flag?'act-ago':'act-yet'">登录</button>
      <p class="explain">无法登陆时请联系产品经理</p>
      <p class="footer">©2017 上海家后信息科技有限公司</p>
    </form>
  </div>
</template>
<script>
  import { Validator } from 'vee-validate'
  import { loginPath, EMPLOYEE_KEY, USER_NAME, USER_ID, account, deviceHeight } from '../assets/js/config'
  import cache from '../assets/js/cache'
  const dictionary = {
    zh_CN: {
      custom: {
        loginName: {required: '账号必填'},
        loginPwd: {required: '密码必填', min: '6到10位', max: '6到10位'}
      }
    }
  }
  Validator.updateDictionary(dictionary)
  export default {
    name: 'Login',
    data () {
      return {
        login: {loginName: '', loginPwd: ''},
        flag: true,
        type: 'password',
        deviceHeight
      }
    },
    created () {
      let userNo = cache.get(account)
      if (userNo) {
        this.login.loginName = userNo
      }
      let userName = cache.get(USER_NAME)
      let key = cache.get(EMPLOYEE_KEY)
      if (key && userName) {
        this.$router.push({ path: '/index' })
      }
    },
    methods: {
      submit (e) {
        cache.set(account, this.login.loginName)
        this.$validator.validateAll().then((result) => {
          const myVue = this
          if (result) {
            this.post({
              url: loginPath,
              sendData: this.login,
              success (data) {
                myVue.$toast({
                  message: '登录成功',
                  duration: 1000
                })
                cache.set(EMPLOYEE_KEY, data.token)
                cache.set(USER_NAME, data.userName)
                cache.set(USER_ID, data.id)
                myVue.$router.push({ path: '/index' })
              }
            })
          }
        })
        return false
      },
      showPwd () {
        this.type = this.type === 'password' ? 'text' : 'password'
      }
    }
  }
</script>
<style scoped>
  .login {
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-top: 1rem;
    width: 100%;
    height: 100%;
    background: url("../assets/img/Group3@2x.png") center center no-repeat;
  }
  .logo {
    position: relative;
    width: 3.64rem;
    height: .7rem;
    margin: 1.4rem auto;
    text-align: center;
    font-size: .48rem;
    font-weight: bolder;
  }
  form {
    margin: 0 1rem;
  }
  form div {
    height: .8rem;
    line-height: .8rem;
    font-size: .3rem;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #D0D0D0;
    margin-top:0.2rem;
  }
  form div > label {
    margin-right: 0.1rem;
  }
  form div > input,form div > .help {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 1rem;
    padding: .2rem 0;
    width: 70%;
    line-height: .6rem;
    text-indent: .02rem;
    font-size: .3rem;
  }
  button {
    border:0 none;
    width: 100%;
    height: 0.8rem;
    line-height:0.8rem;
    background-color: #e02e08;
    margin:1rem auto 0;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    font-size:0.32rem;
    letter-spacing: 6px;
    font-family:'Microsoft YaHei';
    text-align: center;
  }
  .act-ago {
    color: #fff;
  }
  .act-yet {
    color: #888;
  }

  form div > .help {
    position: absolute;
    right:0.5rem;
    width:auto;
    font-size:0.24rem;
    color: #ff5658;
  }
  .explain {
    font-size:0.24rem;
    line-height:0.5rem;
    color: grey;
    margin-top:0.2rem;
  }
  .footer {
    -webkit-transform: translate(0,2.4rem);
    -moz-transform: translate(0,2.4rem);
    -ms-transform: translate(0,2.4rem);
    -o-transform: translate(0,2.4rem);
    transform: translate(0,2.4rem);
    color: #999;
  }
  #icon-eyes{
    position: absolute;
    height: .5rem;
    width: .5rem;
    top: .25rem;
    right: 0;
    background-size: contain;
    -webkit-background-size: contain;
    z-index:9999;
  }
  .close {
    background: url('../assets/img/ic_eye_close.png')  center no-repeat;
  }
  .open {
    background: url('../assets/img/ic_eye.png')  center no-repeat;
  }
</style>

